<%@ page isELIgnored="false"%>
<%@ taglib prefix="spring" uri="http://www.springframework.org/tags"%>
<html>
	<head>
		<title><spring:message code="index.title" /></title>
		<link rel="stylesheet" type="text/css" href="/css/datatable/demo_page.css" />
		<link rel="stylesheet" type="text/css" href="/css/datatable/demo_table_jui.css" />
		<link rel="stylesheet" type="text/css" href="/themes/smoothness/jquery-ui-1.8.4.custom.css" />
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	</head>
	<body>
		<script type="text/javascript">
			jQuery(document).ready(function($) {
				$(searchx());
			});
		</script>
		
		<div id="column1">
			<div id="content1">
				<h2>Please, insert your reward!</h2>
				<p>
					Welcome, you may insert your reward and enjoy with the feedback of your Entity
				</p>
			</div>
			<div id="content2" style="width:280px">
				<h3>Reward</h3>
				<div>
					<input type="text" id="name" />
					<button id="addButton">Add</button>
				</div>
			</div>
			<div style="float:left;width:600px">
				<h3>Rewards Table Manager</h3>
				<script type="text/javascript" language="javascript" src="/js/datatable/jquery.dataTables.js"></script>
				<script type="text/javascript" language="javascript" charset="utf-8">
					var aoDataTableReload = function () {
						$('#example').dataTable().fnDraw();
					}
					var aoDataTransformer = function (aoData){
			            var o = {};
			            var modifiers = ['mDataProp_', 'sSearch_', 'iSortCol_', 'bSortable_', 'bRegex_', 'bSearchable_', 'sSortDir_'];
			            jQuery.each(aoData, function(idx,obj) {
			                if (obj.name) {
			                    for (var i=0; i < modifiers.length; i++) {
			                        if (obj.name.substring(0, modifiers[i].length) == modifiers[i]) {
			                            var index = parseInt(obj.name.substring(modifiers[i].length));
			                            var key = 'a' + modifiers[i].substring(0, modifiers[i].length-1);
			                            if (!o[key]) {o[key] = [];}
			                            o[key][index] = obj.value;
			                            return;
			                        }
			                    }
			                    o[obj.name] = obj.value;
			                }
			                else {
			                    o[idx] = obj;
			                }
			            });
			            var returnjson = JSON.stringify(o);
			            console.debug (returnjson);
			            return returnjson;
			        };
			        var searchx = function() {
						$('#example').dataTable({
							"bProcessing" : true,
							"bServerSide" : true,
							"sAjaxSource": "/reward/searchx",
		 					"aoColumns": [
								{ "mDataProp": "key" },
								{ "mDataProp": "name" },
								{ "mDataProp": "username" }
							],
							"fnServerData" : function(sSource, aoData, fnCallback) {
								$.ajax({
				                    contentType: "application/json;charset=UTF-8",
				                    type: "POST",
									url : sSource,
									data : aoDataTransformer(aoData),
									success : fnCallback,
									error : function (e){console.debug("Evento error de ajax: " + e);}, 
									dataType : "json",
									statusCode: {
									    400: function() {
				                        	$(aoDataTableReload());
										}
									}
								});
							},
							"bJQueryUI": true,
							"sPaginationType": "full_numbers"
						});
			        };
				</script>
				<div id="dt_example"> 
					<div id="container">
						<div id="dynamic">
							<table cellpadding="0" cellspacing="0" border="0" class="display" id="example">
								<thead>
									<tr>
										<th width="40%">Key</th>
										<th width="30%">Name</th>
										<th width="30%">Username</th>
									</tr>
								</thead>
								<tbody>
									<tr>
										<td colspan="3" class="dataTables_empty">Loading</td>
									</tr>
								</tbody>
								<tfoot>
									<tr>
										<th width="40%">Key</th>
										<th width="30%">Name</th>
										<th width="30%">Username</th>
									</tr>
								</tfoot>
							</table>
						</div>
					</div>
				</div>
			</div>
			<br class="clear-all" />
		</div>
		<script>
		$("#addButton").click(function () {
			addReward();
		});
		</script>
		<script type="text/javascript">
		function addReward() {
			var values = {};
			values['name'] = $('#name').val();
			sendJson(
				values,
				"addx",
				function(result) {
					alert("Reward '" + $('#name').val() + "' has been added");
					$(aoDataTableReload());
				}
			);
		}
		</script>
	</body>
</html>